import React, { Component } from 'react';
import axios from 'axios';
import { Spin } from 'antd';
// import $ from  'jquery';
import './LrcList.scss';
class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {
        pop : '薛之谦',
        loading : true,
        List : []
    }
  }

  componentDidMount () {
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+this.state.pop+'&type=lrc&limit=25&offset=0')
      .then(data => {
        console.log(data)
        // this.setState({
        //     List : data.data.data.songs,
        //     loading : false
        // })
      })
      .catch((err) => {
        console.log(err)
      })
  }

  render () {
    return (
      <div className = "LrcList">
        <ul>
            {
                this.state.loading
                ?
                <Spin size="large" />
                :
                this.state.List.map((item, index) => {
                return (
                    <li key={ item.id }>
                        <p>{ item.name }</p>
                        <p>{ item.singer }</p>
                        <p>{ item.time }</p>
                    </li>
                )
                })
            }
        </ul>
      </div>
    )
  }
}

export default Com;
